<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
</head>
<body>
<div id="orientation"></div>
<!--
    方向（ Orientation ）事件监听器
    1. deviceorientation 事件；( orientation : 方向 )
    2. compassneedscalibration 事件；( compass : 指南针， bration：振动 )
    3. devicemotion 事件；（ motion ： 移动 ）

    本章不具有规范性
本规范提供了几个新的DOM事件，这几个事件用于获得关于宿主设备物理方向及运动的信息。这些事件提供的信息不是原始的传感器信息，它们是不能获得底层信息来源的高层数据。常见的信息来源包括陀螺仪、罗盘及加速计。
本规范提供的第一个DOM事件是deviceorientation，其提供设备的物理方向信息，表示为一系列本地坐标系的旋角。
本规范提供的第二个DOM事件是devicemotion，其提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率。若可行的话，事件应该提供设备重心处的加速信息。
本规范提供的最后一个DOM事件是compassneedscalibration，其用于通知Web站点使用罗盘信息校准上述事件。
  -->
<script>
    //注册一个deviceorientation事件的接收器：
    window.addEventListener("deviceorientation", function(event) {
        // 处理event.alpha、event.beta及event.gamma
        document.getElementById("orientation").innerHTML = event.alpha+"  "+ event.beta+"  " + event.gamma ;
        console.log(event);
    }, true);
/*    将设备放置在水平表面，屏幕顶端指向西方，则其方向信息如下：

    {alpha: 90,
            beta: 0,
            gamma: 0};

    为了获得罗盘指向，可以简单的使用360度减去alpha。若设被平行于水平表面，其罗盘指向为(360 - alpha)。
    若用户手持设备，屏幕处于一个垂直平面且屏幕顶端指向上方。beta的值为90，alpha和gamma无关。
    用户手持设备，面向alpha角度，屏幕处于一个垂直屏幕，屏幕顶端指向右方，则其方向信息如下：

    {alpha: 270 - alpha,
            beta: 0,
            gamma: 90};
    只用自定义界面通知用户校准罗盘：

    window.addEventListener("compassneedscalibration", function(event) {
        alert('您的罗盘需要校准，请将设备沿数字8方向移动。');
        event.preventDefault();
    }, true);
    注册一个devicemotion时间的接收器：

    window.addEventListener("devicemotion", function(event) {
        // 处理event.acceleration、event.accelerationIncludingGravity、
        // event.rotationRate和event.interval
    }, true);
    将设备放置在水平表面，屏幕向上，acceleration为零，则其accelerationIncludingGravity信息如下：

    {x: 0,
            y: 0,
            z: 9.81};
    设备做自由落体，屏幕水平向上，accelerationIncludingGravity为零，则其acceleration信息如下：

    {x: 0,
            y: 0,
            z: -9.81};
    将设备安置于车辆至上，屏幕处于一个垂直平面，顶端向上，面向车辆后部。车辆行驶速度为v，向右侧进行半径为r的转弯。设备记录acceleration和accelerationIncludingGravity在位置x处的情况，同时设备还会记录rotationRate.gamma的负值：

    {acceleration: {x: v^2/r, y: 0, z: 0},
        accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},
        rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} };*/


    //晃动实例：

    var shakeThreshold = 10000; // 定义一个摇动的阈值
    var lastUpdate = 0; // 记录上一次摇动的时间
    var x = y = z = lastX = lastY = lastZ = 0; //义x、y、z记录三个轴的数据以及上一次触发的数据
    // 监听传感器运动事件
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert('本设备不支持devicemotion事件');
    }
    // 运动传感器处理
    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
        var curTime = new Date().getTime();    // 100毫秒进行一次位置判断
        if ((curTime - lastUpdate) > 100) {
            var diffTime = curTime - lastUpdate;
            lastUpdate = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;        // 前后x, y, z间的差值的绝对值和时间比率超过了预设的阈值，则判断设备进行了摇晃操作
            if (speed > shakeThreshold) {
                //doSomething
                //alert(11);
            }
            lastX = x;
            lastY = y;
            lastZ = z;
        }
    }
</script>
</body>
</html>